<script setup lang="ts">
import useTaskStore from '@/store/task'
import {onMounted, ref, watch} from "vue";
import OptionsMenu from "@/components/widgets/optionsMenu/optionsMenu.vue";
import {useClickAway} from "@/utils";

const taskStore = useTaskStore()
watch(() => taskStore.activeTask, (newVal) => {
  console.log(newVal?.options)
})

//选项容器的DOM
const optionsContainerRef = ref<Document | null>(null)
//当前选中的optionName
const activeOption = ref<string | null>(null)
//点击选项
const clickOption = (option) => {
  activeOption.value = option.name
}
//点击选项以外的地方
const clickAwayHidden = () => {
  if (optionsContainerRef.value) {
    useClickAway(() => {
      activeOption.value = null
    }, [optionsContainerRef.value])
  }
}
onMounted(() => {
  //绑定clickAway事件
  clickAwayHidden()
})
</script>
<template>
  <div class="left-bar">
    <div class="material-icons main-icon">link</div>
    <div class="app-title" v-if="taskStore.activeTask">{{ taskStore.activeTask.title }}</div>
    <div class="app-title" v-else>Carrol Connect</div>
    <div class="options-container" ref="optionsContainerRef">
      <template v-if="taskStore.activeTask" v-for="option in taskStore.activeTask.options">
        <div class="item-options" @click="clickOption(option)">
          {{ option.title }}
          <OptionsMenu :option="option" :activeOption="activeOption" @close="activeOption = null"></OptionsMenu>
        </div>
      </template>
    </div>
  </div>
</template>
<style lang="less" scoped>
.left-bar {
  user-select: none;
  display: flex;
  align-items: center;

  .main-icon {
    color: #1B211F;
    margin-right: 10px;
    font-weight: 600;
    font-size: 28px;
  }

  .app-title {
    color: #1B211F;
    height: 30px;
    line-height: 30px;
    font-weight: 700;
    margin-right: 20px;
  }

  .options-container {
    display: flex;

    .item-options {
      height: 30px;
      line-height: 30px;
      padding: 0 9px;
      cursor: pointer;
      font-size: 13px;
      position: relative;
    }
  }


  .item-options:hover {
    background-color: rgba(255, 255, 255, 0.4);
  }

  .item-options:active {
    background-color: rgba(0, 0, 0, 0.1);
  }
}
</style>
